/**
 * Copyright (c) 2017-present, Daniel
 * All rights reserved.
 *
 * @flow
 */

import React, {PureComponent} from 'react'
import {StyleSheet, View, Image, Text,ScrollView,RefreshControl} from 'react-native'
import NavigationItem from '../../widget/NavigationItem'
import color from '../../widget/color'
import {Heading2,Paragraph} from '../../widget/Text'
import SpacingView from '../../widget/SpacingView'
import DetailCeil from '../../widget/DetailCeil'
import screen  from '../../common/screen'
type Props = {
    
}

type State = {
    isRefreshing:bolean
}

class MineScene extends PureComponent<Props, State> {
    constructor(props) {
      super(props)
    
      this.state = {
         isRefreshing:false
      };
    };
    
    static navigationOptions=({navigation})=>({
            headerRight:(
                <View style={{flexDirection: 'row',}}>
                    <NavigationItem 
                        icon={require('../../img/mine/icon_navigationItem_set_white.png')}
                        onPress={()=>{
                            
                        }}
                     />
                    <NavigationItem 
                        icon={require('../../img/mine/icon_navigationItem_message_white.png')}
                        onPress={()=>{
                            
                        }}
                     />
                </View>
            ),
            headerStyle:{
                backgroundColor: color.primary,
                elevation:0,
                borderBottomWidth:0
            }
    })

    //抽出来，以免render里面内容过多
    renderHeader=()=>(
        <View style={styles.headerContainer}>
            <Image style={styles.avatar} source={require('../../img/mine/avatar.png')} />
            <View >
                <View  style={{flexDirection:'row',alignItems:'center'}}>
                    <Heading2 style={{color:'white'}}> steady</Heading2>
                    <Image source={require('../../img/mine/beauty_technician_v15.png')} />
                    
                </View>
                <Paragraph style={{color:'white',marginTop: 10,}}>个人信息></Paragraph>
                
            </View>
        </View>
    )
    //获取列表数据源  
     getDataList = () => {
        return (
            [
                [
                    {title: '我的钱包', subtitle: '办信用卡', image: require('../../img/mine/icon_mine_wallet.png')},
                    {title: '余额', subtitle: '￥95872385', image: require('../../img/mine/icon_mine_balance.png')},
                    {title: '抵用券', subtitle: '63', image: require('../../img/mine/icon_mine_voucher.png')},
                    {title: '会员卡', subtitle: '2', image: require('../../img/mine/icon_mine_membercard.png')}
                ],
                [
                    {title: '好友去哪', image: require('../../img/mine/icon_mine_friends.png')},
                    {title: '我的评价', image: require('../../img/mine/icon_mine_comment.png')},
                    {title: '我的收藏', image: require('../../img/mine/icon_mine_collection.png')},
                    {title: '会员中心', subtitle: 'v15', image: require('../../img/mine/icon_mine_membercenter.png')},
                    {title: '积分商城', subtitle: '好礼已上线', image: require('../../img/mine/icon_mine_member.png')}
                ],
                [
                    {title: '客服中心', image: require('../../img/mine/icon_mine_customerService.png')},
                    {title: '关于美团', subtitle: '我要合作', image: require('../../img/mine/icon_mine_aboutmeituan.png')}
                ]
            ]
        )
    }


    //创建列表
    renderCeils = ()=>{
        let cells=[];
        let dataList = this.getDataList();
        for (let i = 0; i < dataList.length; i++) {
           let sublist=dataList[i];
           for (let j = 0; j < sublist.length; j++) {
              let data = sublist[j];
              let cell=(
                <DetailCeil 
                    key={`${i}${j}`}
                    title={data.title}
                    subtitle={data.subtitle}
                    style={{height:50}}
                    image={data.image}
                />
              )
              cells.push(cell)
               
           }
           cells.push(
               <SpacingView key={i} />
           )
            
        }
        return cells;
    }

    //onHeaderRefresh方法 下拉刷新
    onHeaderRefresh=()=>{
        this.setState({
            isRefreshing:true,
        }),
        setTimeout(() => {
            this.setState({isRefreshing:false})
        }, 2000);
    }
    render() {
        return (
            <View style={{flex: 1,backgroundColor:color.paper}}>
                <View style={styles.headerBackground} />
                <ScrollView
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.isRefreshing}
                            onRefresh={this.onHeaderRefresh}
                            title='玩命加载中。。。'
                            titleColor='red'
                        />
                    }
                >
                    {this.renderHeader()}
                    <SpacingView />
                    {this.renderCeils()}
                </ScrollView>
            </View>
        )
     }

}

const styles = StyleSheet.create({
    headerContainer:{
        flex:1,
        flexDirection:'row',
        backgroundColor: color.primary,
        paddingBottom: 20,
        alignItems:'center',
        padding:10
    },
    headerBackground:{
        position: 'absolute',
        width:screen.width,
        height:screen.width /2,
        backgroundColor: color.primary,
    },
    avatar:{
        width:50,
        height:50,
        borderRadius: 25,
        marginRight: 10,
        borderColor: "#51d3c6",


    },
    
})

export default MineScene